<template>
  <div style="margin-bottom: 0px" class="hidden-sm-and-up">
    <div class="mobile_nav_wrap hidden-sm-and-up">
      <div class="nav_btns" @click="moveMenu">
        <i
          class="el-icon-menu"
          style="font-size: 20px; margin-right: 20px; color: #cdcdcd"
        ></i>
      </div>
      <div class="navbar_left" @click="gobackHome">
        <img src="@/assets/asissi/svg/logo.svg" alt="爱喜喜" />
      </div>
      <div class="navbar_right">
        <div
          @click="go"
          style="
            height: 100%;
            display: flex;
            align-items: center;
            margin-right: 20px;
          "
        >
          <img
            src="@/assets/asissi/xhs.png"
            style="height: 20px; margin-left: 20px"
          />
        </div>
      </div>
    </div>
    <Affix>
      <div class="nav_menu" ref="menu">
        <router-link
          class="menu_item"
          to="/home"
          :class="currentActive === 0 ? 'active' : ''"
          >首页</router-link
        >
        <div
          class="menu_item"
          @click="changeProductShow"
          :class="currentActive === 1 ? 'active' : ''"
        >
          产品
        </div>
        <div class="item_options" v-show="productShow">
          <a href="/production/1">月兔系列</a>
          <a href="/production/2">蝴蝶系列</a>
          <a href="/production/3">吉祥结系列</a>
          <a href="/production/4">蕉叶系列</a>
        </div>
        <router-link
          class="menu_item"
          to="/threenav"
          :class="currentActive === 2 ? 'active' : ''"
          >爱喜喜团队</router-link
        >
        <!-- <div
          class="menu_item"
          @click="changefireShow"
          :class="currentActive === 4 ? 'active' : ''"
        >
          了解爱喜喜
        </div> -->
      </div>
    </Affix>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuShow: false,
      productShow: false,
      centerShow: false,
      fireShow: false,
    };
  },
  props: {
    currentActive: {
      default: 0,
      type: Number,
    },
  },
  methods: {
    moveMenu() {
      this.menuShow = !this.menuShow;
      if (this.menuShow) {
        this.$refs.menu.style.top = "30PX";
      } else {
        this.$refs.menu.style.top = "-1000PX";
      }
    },
    changeProductShow() {
      this.productShow = !this.productShow;
      this.centerShow = false;
      this.fireShow = false;
    },
    changeCenterShow() {
      this.centerShow = !this.centerShow;
      this.fireShow = false;
      this.productShow = false;
    },
    changefireShow() {
      this.fireShow = !this.fireShow;
      this.centerShow = false;
      this.productShow = false;
    },
    gotoExperience() {
      this.$router.push("/demo").catch((v) => {});
    },
    gobackHome() {
      this.$router.replace("/home").catch((v) => {});
    },
    go() {
      location.href =
        "https://www.xiaohongshu.com/user/profile/576d57da5e87e71d9496bacf?xhsshare=WeixinSession&appuid=576d57da5e87e71d9496bacf&apptime=1713874467";
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile_nav_wrap {
  box-sizing: border-box;
  width: 100%;
  height: 156px;
  background: #fff;
  z-index: 1000;
  display: flex;
  padding: 15px 0 15px 15px;
  align-items: center;
  position: fixed;
  top: 0;
  .navbar_left {
    flex: 1;
    background: #fff;
    img {
      width: 100%;
    }
  }
  .navbar_right {
    flex: 2;
    height: 56px;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    .nav_tiyan {
      width: 88px;
      height: 100%;
      background: #1a63c4;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    .nav_btns {
      width: 56px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 50px;
      }
    }
  }
}
.active {
  color: #f39c00 !important;
  font-weight: bold;
}
.nav_menu {
  position: absolute;
  width: 100%;
  list-style: none;
  left: 0;
  right: 0;
  top: -1000px;
  padding-bottom: 0;
  box-sizing: border-box;
  background: #eff0f1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.8s;
  .menu_item {
    width: 100%;
    height: 40px;
    font-size: 16px;
    background: #eff0f1;
    color: #1c212d;
    padding: 60px 30px;
    display: flex;
    align-items: center;
  }
  .item_options {
    width: 100%;
    padding: 5px 10px;
    font-size: 14px;
    background: #fff;
    a {
      display: inline-block;
      width: 100%;
      color: #666;
      height: 25%;
      padding: 20px 30px;
    }
  }
}
</style>
